<template>
  <div class="table-card">
    <!-- 表头部分 -->
    <div class="table-header">
      <!-- 实际数据部分 -->
      <div class="header-section">
        <div class="header-main">
          <div class="header-cell main-bg center-cell main-title">项目</div>
          <div class="header-group">
            <div class="header-cell main-bg" style="margin-bottom: 5px">{{ yearTitle }}</div>
            <div class="sub-header-group">
              <div class="header-cell">预测</div>
              <div class="header-cell">预算</div>
              <div class="header-cell">完成率</div>
              <div class="header-cell">去年</div>
              <div class="header-cell">增长率</div>
            </div>
          </div>
          <div class="header-group">
            <div class="header-cell main-bg" style="margin-bottom: 5px">{{ frontTitle }}</div>
            <div class="sub-header-group">
              <div class="header-cell">预测</div>
              <div class="header-cell">预算</div>
              <div class="header-cell">完成率</div>
              <div class="header-cell">去年</div>
              <div class="header-cell">增长率</div>
            </div>
          </div>
          <div class="header-group">
            <div class="header-cell main-bg" style="margin-bottom: 5px">{{ afterTitle }}</div>
            <div class="sub-header-group">
              <div class="header-cell">预测</div>
              <div class="header-cell">预算</div>
              <div class="header-cell">完成率</div>
              <div class="header-cell">去年</div>
              <div class="header-cell">增长率</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 表格内容 -->
    <div class="table-body">
      <template v-if="loading">
        <div class="loading-wrapper">
          <a-spin />
        </div>
      </template>
      <template v-else>
        <div v-for="(row, index) in tableData" :key="index" class="table-row">
          <div class="row-section">
            <div
              class="row-cell rank-cell"
              :class="{
                'subtotal-row': isSubtotalRow(row),
                'table-cell-left': isRestRow(row),
              }"
            >
              {{ row?.subjectName }}
            </div>
            <div class="data-group">
              <div class="data-cells">
                <div class="row-cell">{{ colRender(row?.actualTotal, row) }}</div>
                <div class="row-cell">{{ colRender(row?.budgetTotal, row) }}</div>
                <div class="row-cell">{{ MathUtil.percent2DFormatter(row?.comRateTotal, 1) }}</div>
                <div class="row-cell">{{ colRender(row?.lActualTotal, row) }}</div>
                <div class="row-cell">{{ MathUtil.percent2DFormatter(row?.diffRateTotal, 1) }}</div>
              </div>
            </div>
            <div class="data-group">
              <div class="data-cells">
                <div class="row-cell">{{ colRender(row?.actual, row) }}</div>
                <div class="row-cell">{{ colRender(row?.budget, row) }}</div>
                <div class="row-cell">{{ MathUtil.percent2DFormatter(row?.comRate, 1) }}</div>
                <div class="row-cell">{{ colRender(row?.lActual, row) }}</div>
                <div class="row-cell">{{ MathUtil.percent2DFormatter(row?.diffRate, 1) }}</div>
              </div>
            </div>
            <div class="data-group">
              <div class="data-cells">
                <div class="row-cell">{{ colRender(row?.lActual, row) }}</div>
                <div class="row-cell">{{ colRender(row?.budgetPre, row) }}</div>
                <div class="row-cell">{{ MathUtil.percent2DFormatter(row?.comRatePre, 1) }}</div>
                <div class="row-cell">{{ colRender(row?.lActualPre, row) }}</div>
                <div class="row-cell">{{ MathUtil.percent2DFormatter(row?.diffRatePre, 1) }}</div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import * as MathUtil from '/@/utils/MathUtil';

  // Props定义
  const props = defineProps({
    loading: {
      type: Boolean,
      default: false,
    },
    dataList: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
    summary: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
    customRow: {
      type: Function,
      default: null,
    },
    columns: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
  });

  // 计算属性
  const tableData = computed(() => props.dataList || []);
  const yearTitle = computed(() => props.columns[3].title || '');
  const frontTitle = computed(() => props.columns[8].title || '');
  const afterTitle = computed(() => props.columns[13].title || '');
  const isSubtotalRow = (row: any) => {
    if (!row || !row.subjectCode) return false;
    return (
      row.subjectCode === '01' ||
      row.subjectCode === 'C' ||
      row.subjectCode === 'D' ||
      row.subjectCode === 'E' ||
      row.subjectCode === '05' ||
      row.subjectCode === '0501'
    );
  };
  const isRestRow = (row: any) => {
    if (!row || !row.subjectCode) return false;
    return (
      row.subjectCode === '01020101' ||
      row.subjectCode === '01020102' ||
      row.subjectCode === '01020103' ||
      row.subjectCode === '01020104' ||
      row.subjectCode === '01020105'
    );
  };

  // const formatDiff = (value: any) => {
  //   if (value === undefined || value === null) return '-';
  //   const numValue = Number(value);
  //   if (isNaN(numValue)) return '-';
  //   const formattedValue = MathUtil.percent2DFormatter(numValue, 0);
  //   return numValue >= 0 ? `▲ ${formattedValue}` : `▼ ${formattedValue.substring(1)}`;
  // };

  // const getTrendClass = (value: any) => {
  //   if (value === undefined || value === null) return '';
  //   const numValue = Number(value);
  //   return !isNaN(numValue) && numValue >= 0 ? 'trend-up' : 'trend-down';
  // };
  const colRender = (val, m) => {
    if (m.showFormatter) {
      const [methodName, ...params] = m.showFormatter.split('|');
      if (typeof MathUtil[methodName] === 'function') {
        return MathUtil[methodName](val, ...params);
      }
    }
    return val;
  };
</script>

<style lang="less" scoped>
  .table-card {
    width: 100%;
    background: #fff;
    border-radius: 8px;
    // padding: 16px;
    height: 100%;
    flex-grow: 1; /* 填充剩余空间 */
  }

  .table-header {
    display: flex;
    gap: 20px;
    margin-bottom: 5px;

    .header-section {
      flex: 1;

      .header-main {
        display: grid;
        grid-template-columns: 130px 1fr 1fr 1fr;
        gap: 10px;
        background: #fff;

        .center-cell {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 32px;
        }
      }

      .header-cell {
        padding: 8px;
        text-align: center;
        font-size: 12px;
        color: #1d2129;
        background: #e9e7f2;
        height: 32px;
        line-height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;

        &.main-bg {
          background: #e9e7f2;
          font-weight: 600;
        }
      }
      .main-title {
        height: 100% !important;
      }
      .header-group {
        .sub-header-group {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 10px;
        }
      }
    }
  }

  .table-body {
    .table-row {
      display: flex;
      gap: 20px;
      margin-bottom: 1px;

      .row-section {
        flex: 1;
        display: grid;
        grid-template-columns: 130px 1fr 1fr 1fr;
        gap: 10px;

        .rank-cell {
          background: #e9e7f2 !important;
        }

        .tag-cell {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .data-cells {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 10px;
        }

        .row-cell {
          padding: 8px;
          text-align: center;
          font-size: 12px;
          color: #1d2129;
          background: #f7f5f4;
          height: 32px;
          line-height: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          // white-space: nowrap;

          &.company-name {
            text-align: left;
            justify-content: flex-start;
          }
        }
      }
    }
  }

  .table-footer {
    margin-top: 20px;
    border-top: 1px solid #e5e6eb;
    padding-top: 20px;

    .table-row {
      .row-section {
        .summary-section {
          grid-column: span 3;
        }

        .summary-cell {
          text-align: left;
          justify-content: flex-start;
          font-weight: 600;
          background: #d3cee2;
        }
      }
    }
  }

  .loading-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
  }

  .main-bg {
    background: #d3cee2 !important;
  }

  // 虚线边框样式
  .table-row {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      border-bottom: 1px dashed #e5e6eb;
    }
  }
  .table-cell-font-bold {
    font-weight: bold;
  }

  .subtotal-row {
    font-weight: 600;
    color: #1d2129;
  }

  .table-cell-font-bold {
    font-weight: 600;
    color: #1d2129;
  }
  .table-cell-left {
    text-align: right !important;
    justify-content: end !important;
  }
</style>
